<style scoped>
	.vue-box {
		background-color: #EEE;font-size: 14px;
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}
	.content-box {margin: 1em;padding: 1em;background-color: #FFF;color: #666;}
	.el-tag{border-radius: 1px;}
	/*800之下*/
	@media(max-width: 800px) {
		.kapian {
			width: 100% !important;
			margin-right: 0px !important;
		}
		.saoma {
			display: none;
		}
	}
	/* markdown格式 */
	.md-contetn{padding-left: 1.5em; line-height: 26px;}
</style>
<style>
	/* 多个ul时，切换那个啥 */
	.md-contetn h4{margin-left: -0.5em;}
	.md-contetn ul,.md-contetn ol{padding-left: 1em;}
	.md-contetn pre{padding: 5px; background-color: #EEE; font-family: "times new roman";}
</style>

<template>
	<div class="vue-box">
		<!-- 欢迎 -->
		<div class="content-box">
			<div style="padding: 1em; border-left: 5px #2D8CF0 solid; background-color: #EEE;">
				<big><big>Welcome to zm-admin </big></big>
				<span style="display: inline-block; margin-left: 1em; color: #888;"> —— 朝暮后台管理系统（朝朝辞暮</span>
				<span></span>
			</div>
		</div>
		<!-- 介绍 -->
		<div class="content-box">
			<div class="kapian" style="width: 35%; float: left; margin-right: 4%;">
				<el-divider content-position="left">
					<big><big>简介</big></big>
				</el-divider>
				<div>
					<p>
            从21年开始就想做一个springboot+vue的前后端独立项目，想根据前端静态模版进行二度开发再编写后端服务，于是有了：
            <br/>
            朝暮后台管理系统——基于sa-vue-admin二次开发的单页面应用
					</p>
					<br>
					<ul style="padding-left: 1em; line-height: 1.5em;">
            <li>
              <b>建站心路历程：</b>
              <el-link type="primary" href="http://www.muxyun.com/find/1280.html" target="_blank" style="margin-left: 14px;">点此</el-link>
            </li>
						<li>
							<b>码云地址：</b>
							<el-link type="primary" href="https://gitee.com/kinght7z/zm-manage" target="_blank">https://gitee.com/kinght7z/zm-manage</el-link>
						</li>
            <li>
              <b>原模版地址：</b>
              <el-link type="primary" href="https://gitee.com/click33/sa-vue-admin" target="_blank">https://gitee.com/click33/sa-vue-admin</el-link>
            </li>
					</ul>
					<br>
				</div>

			</div>
			<div class="kapian" style="width: 30%; float: left;">
				<el-divider content-position="left">
					<big><big>前端技术选型</big></big>
				</el-divider>
				<ul style="padding-left: 1em; line-height: 1.5em;">
					<li><el-link type="primary" href="https://cn.vuejs.org/" target="_blank">JS引擎：Vue @2.6.11</el-link></li>
					<li><el-link type="primary" href="https://cli.vuejs.org/zh/" target="_blank">脚手架：@vue/cli：@4.0.5</el-link></li>
					<li><el-link type="primary" href="https://element.eleme.cn/#/zh-CN" target="_blank">UI框架：Element-UI @2.13.0</el-link></li>
					<li><el-link type="primary" href="http://layer.layui.com/" target="_blank">web弹层：layer @3.1.1</el-link></li>
					<li><el-link type="primary" href="https://www.swiper.com.cn/" target="_blank">切页动画：Swiper @4.5.0</el-link></li>
					<li><el-link type="primary" href="https://github.com/axios/axios" target="_blank">通信：axios @1.3.4</el-link></li>
				</ul>
			</div>

      <div class="kapian" style="width: 30%; float: right;">
        <el-divider content-position="left">
          <big><big>后端技术选型</big></big>
        </el-divider>
        <ul style="padding-left: 1em; line-height: 1.5em;">
          <li><el-link type="primary" href="https://spring.io/projects/spring-boot/" target="_blank">主体框架：springboot @2.6.11</el-link></li>
          <li><el-link type="primary" href="https://github.com/quartz-scheduler/quartz" target="_blank">权限框架：Sa-Token @1.29.0</el-link></li>
          <li><el-link type="primary" href="https://element.eleme.cn/#/zh-CN" target="_blank">定时任务：Quartz @2.3.7</el-link></li>
          <li><el-link type="primary" href="http://layer.layui.com/" target="_blank">websocket：netty @4.1.34</el-link></li>
          <li><el-link type="primary" href="https://www.swiper.com.cn/" target="_blank">数据库：MySQL @5.7.36</el-link></li>
          <li><el-link type="primary" href="https://www.baomidou.com/" target="_blank">持久层框架：MyBatis-Plus @3.4.0</el-link></li>
        </ul>
      </div>
			<div style="clear: both;"></div>
		</div>

		<!-- 功能介绍 -->
		<div class="content-box">
			<div class="kapian" style="width: 35%; float: left; margin-right: 4%;">
				<el-divider content-position="left">
					<big><big>功能介绍</big></big>
				</el-divider>
				<div class="md-contetn" v-html="md_js"></div>
<!--				<li style="margin-left: 1.5em;">-->
<!--					窗口模式测试：-->
<!--					<a href="javascript:;" @click="sa_admin.is_show_tabbar = true;">多窗口模式</a> &nbsp;&nbsp;-->
<!--					<a href="javascript:;" @click="sa_admin.is_show_tabbar = false;">单窗口模式</a>-->
<!--				</li>-->
			</div>
			<div class="kapian" style="width: 55%; float: left;">
				<el-divider content-position="left">
					<big><big>使用步骤</big></big>
				</el-divider>
				<div class="md-contetn" v-html="md_sy"></div>
			</div>
			<div style="clear: both;"></div>
		</div>
		
		
		<!-- 更新日志 -->
		<div class="content-box">
			<el-divider content-position="left">
				<big><big>更新日志</big></big>
			</el-divider>
			<div class="kapian">
				<ul style="padding-left: 2em; padding-top: 1em; line-height: 1.5em;">
					
					<!-- ====================== 一个版本 ===================== -->
					<li>
						<b> <el-tag size="mini">版本 v1.0.3</el-tag></b>
						&nbsp;&nbsp;2020-03-05
					</li>
					<li>去除：去除tab双击刷新功能</li>
					<div><br></div>
					
					<!-- ====================== 一个版本 ===================== -->
					<li>
						<b> <el-tag size="mini">版本 v1.0.2</el-tag></b>
						&nbsp;&nbsp;2020-03-02
					</li>
					<li>新增：新增tab双击刷新功能</li>
					<div><br></div>
					
					<!-- ====================== 一个版本 ===================== -->
					<li>
						<b> <el-tag size="mini">版本 v1.0.1</el-tag></b>
						&nbsp;&nbsp;2020-2-29 
					</li>
					<li>去除vue-router</li>
					<li>增加sa_admin.getView函数，用于跨窗口通信</li>
					<div><br></div>
					
					<!-- ====================== 一个版本 ===================== -->
					<li>
						<b> <el-tag size="mini">版本 v1.0.0</el-tag></b>
						&nbsp;&nbsp;2020-2-29 
					</li>
					<li>第一个版本出炉</li>
					<div><br></div>
				</ul>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	import marked from 'marked';
	export default {
		data() {
			// 功能介绍 
			let md_js = `
- 用户：左树右表结构，支持各种树表交互，密码字段加盐加密
- 部门：部门树各级节点展开为懒加载（应对可能数据量过大的情况），且部门修改后为局部刷新，不是全局刷新（减少资源消耗），支持一二三级
- 菜单：动态菜单实时渲染，配置后端接口地址可直接注册鉴权，根据不同菜单作用有对应类型，支持一二三级，
- 角色: 分配角色的菜单权限进行并实时刷新，支持快速管理角色下的用户与快速给用户分配角色
- 字典：可系统里的一些属性（如选择框的选项，各种类型和状态字段）进行管理，目前用户状态和任务执行状态实装了，实际使用需搭配代码
- 附件/访客/日志：一些基本管理操作
- 定时任务：定时执行的脚本程序，可通过配置定时策略设置执行间隔，另有执行日志方便实时观察
- 在线聊天：基于websocket实现的聊天室功能，支持收发文字/图片消息和其他基本功能
- 鉴权：
  - 前端鉴权：为提升用户体验，若功能有对话框，则在对话框弹出前进行鉴权
  - 后端鉴权：在菜单配置中注册，粒度在按钮级
- 通信：
  - 弃用原模版封装的ajax，基于axios进行二度封装，详见http文件夹下js
  - 对请求各种通用操作进行统一处理，并对特殊请求进行额外处理，极大程度提升代码规范
- js接口：预留zm.js方便后续二开或迭代使用
			`;
			// 使用步骤
			let md_sy = `
#### 1、获取源码
- 方式1：通过gitee或者github下载
- 方式2：通过Git Bash：
\`\`\`
	git clone https://gitee.com/kinght7z/zm-manage.git
\`\`\`

#### 2.1、前端运行
- 获取源码后，在项目根目录执行cmd命令：
\`\`\`
	安装依赖：npm i
	运行项目：npm run serve
\`\`\`
- 根据控制台输出的路径，访问浏览器，一般为：<a href="http://localhost:8081/" target="_blank">http://localhost:8081/</a>
#### 2.2、后端运行
- 获取源码后，修改数据库、redis相关配置，配置后端端口等参数：
\`\`\`
	打开本地redis-server，idea一键启动
\`\`\`

#### 3、使用注意
- 在开发时，如无必要，请不要直接魔改模板的代码，以免在运行时出现意外bug
- 在 sa-resourecs 文件下，有个 sa-admin-init.js， 这是模板为你预留一个文件，用来对接你的业务逻辑
- 在这个文件里，你可以：
\`\`\`
	sa_admin.title = 'SA-后台模板';		// 设置模板标题
	sa_admin.logo_url = '图片地址';    	// 设置logo图标地址
	sa_admin.icon_url = '图片地址';   	 // 设置icon图标地址
	sa_admin.initMenu(); // 初始化菜单, 不传参代表默认显示所有菜单
	sa_admin.init();	// 初始化模板, 必须调用
\`\`\`
#### 4、二开注意
如果您有二开需求：
- 建议前端代码放置在sa-view文件夹下，方便后续对其的菜单处理
- zm.js里是本人预留下的一些全局js接口，如果有需要您也可以对其进行新增，使用（this.zm.方法名）
- Quartz相关的任务类，注解配置需与前端配置的beanName相同
- 如果聊天室功能无法使用，建议查看websocket配置的端口是否被占用

			`;
			return {
				md_js: marked(md_js),
				md_sy: marked(md_sy)
			}
		},
		methods: {
			// 没了
			meile: function() {
				this.$message({
					message: '没了还点',
					type: 'warning'
				});
			},
			// 显示文档页面
			openDoc: function() {
				parent.sp.selectMenu(11);
			}

		},
		mounted() {
			// document.querySelectorAll('.md-contetn').forEach(function(item) {
			// 	console.log(item.innerHTML);
				
			// 	console.log(ds);
			// 	let str = marked(ds);
			// 	item.innerHTML = str;
			// })
		}
	}
</script>

